const images = document.querySelectorAll("header > div > img");
const img_div = document.querySelectorAll("header > div");
const header = document.querySelector("header");

// 自执行函数：初始化第二张与第三张图片的模糊度
(function () {
    for (let i = 1; i < images.length - 3; i++) {
        images[i].style.setProperty("--blur", "0px");
    }
})()

// 监听鼠标移动事件，改变全部img的偏移度，模糊度；
// 同时改变transition的时间
header.addEventListener("mousemove", (e) => {
    let percent = e.clientX / window.outerWidth;
    let offset = 10 * percent;
    let blur = 20;
    let delay = 0;
    for (let [index, image] of images.entries()) {
        offset *= 1.3;
        let blurValue = Math.pow((index / images.length - percent), 2) * blur;
        image.style.setProperty('--offset', `${offset}px`);
        image.style.setProperty('--blur', `${blurValue}px`);
        image.style.setProperty('--delay', `${delay}`);
    }

})

// 使用setInterval，改变图片显示
var eye = document.querySelectorAll("header > div > img")[1];
var eyeArr = ["3-1.png", "3.png", "2.png"];
var num = 0;
setInterval(() => {
    var eyes = setInterval(() => {
        if (num < 3) {
            eye.src = eye.src.substr(0, eye.src.lastIndexOf("/") + 1) + eyeArr[num];
            num++;
        } else {
            num = 0;
            clearInterval(eyes)
        }
    }, 160)
}, 5000)

// 监听鼠标移除header事件，初始化全部img偏移度，模糊度，transition时间；
// 同时--重新--设置第二与第三图片的模糊度
header.addEventListener("mouseout", () => {
    let delay = 0.3;
    for (let [index, image] of images.entries()) {
        image.style.setProperty('--offset', '0px');
        image.style.setProperty('--blur', '2px');
        image.style.setProperty('--delay', `${delay}s`);
    }

    for (let i = 1; i < images.length - 3; i++) {
        images[i].style.setProperty("--blur", "0px");
    }
})